<script src="https://cdn.tailwindcss.com"></script>
<style>
    body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
    }

    .stat-card {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    }

    .rank-badge {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .progress-bar {
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    }

    .mode-tag {
        display: inline-block;
        font-size: 0.875rem;
        font-weight: 600;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        margin-bottom: 1rem;
        margin-right: 0.5rem;
    }

    .mode-tag-classic {
        background: linear-gradient(90deg, #fbc2eb 0%, #a6c1ee 100%);
        color: #6b21a8;
    }

    .mode-tag-team {
        background: linear-gradient(90deg, #b2fefa 0%, #0ed2f7 100%);
        color: #155e75;
    }

    .mode-tag-metro {
        background: linear-gradient(90deg, #f7971e 0%, #ffd200 100%);
        color: #92400e;
    }
</style>

<body class="p-4 md:p-8">
    <div class="max-w-7xl mx-auto">
        <div class="bg-white rounded-2xl shadow-2xl p-6 mb-8">
            <div class="flex items-center gap-6">
                <img src="{{roleIcon}}" alt="用户头像" class="w-24 h-24 rounded-full border-4 border-purple-500 shadow-lg">
                <div class="flex-1">
                    <h1 class="text-3xl font-bold text-gray-800 mb-2">{{roleName}}</h1>
                    <div class="flex items-center gap-4 text-gray-600">
                        <span class="bg-purple-100 px-4 py-1 rounded-full font-semibold">等级 {{level}}</span>
                        <span class="bg-blue-100 px-4 py-1 rounded-full font-semibold">{{roleArea}}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="stat-card rounded-2xl shadow-xl p-6 mb-8">
            <h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">荣誉展示</h3>

            <div class="grid grid-cols-2 gap-6 mb-6">
                <div class="flex items-center p-4 rounded-xl">
                    <div
                        class="overflow-hidden rounded-lg mr-4 w-20 h-20 flex items-center justify-center flex-shrink-0">
                        <img src="{{honorData.highestDivUrl}}" class="w-full h-full object-cover" alt="历史最高">
                    </div>
                    <div class="flex-1">
                        <h4 class="text-lg font-semibold text-gray-800 mb-1">历史最高/王牌次数</h4>
                        <p class="text-2xl font-bold text-orange-600">{{honorData.wangpaiLevel}}</p>
                        <p class="text-sm text-gray-600">{{honorData.highestDivName}}</p>
                    </div>
                </div>

                <div class="flex items-center p-4 rounded-xl">
                    <div
                        class="overflow-hidden rounded-lg mr-4 w-20 h-20 flex items-center justify-center flex-shrink-0">
                        <img src="{{honorData.likeIcon}}" class="w-full h-full object-cover" alt="队友点赞">
                    </div>
                    <div class="flex-1">
                        <h4 class="text-lg font-semibold text-gray-800 mb-1">队友点赞</h4>
                        <p class="text-2xl font-bold text-green-600">{{honorData.likeTimes}}</p>
                        <p class="text-sm text-gray-600">获得队友认可</p>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-4 gap-4">
                <div class="flex flex-col items-center p-4 rounded-xl">
                    <div class="overflow-hidden rounded-lg mb-3 w-16 h-16 flex items-center justify-center">
                        <img src="{{honorData.wangpaiIcon}}" class="w-full h-full object-cover" alt="王牌印记">
                    </div>
                    <span class="text-sm font-semibold text-gray-700 text-center mb-1">王牌印记</span>
                    <span class="text-xs text-gray-600 text-center">{{honorData.wangpaiLevelName}}</span>
                </div>

                <div class="flex flex-col items-center p-4 rounded-xl">
                    <div class="overflow-hidden rounded-lg mb-3 w-16 h-16 flex items-center justify-center">
                        <img src="{{honorData.zywpIcon}}" class="w-full h-full object-cover" alt="卓越印记">
                    </div>
                    <span class="text-sm font-semibold text-gray-700 text-center mb-1">卓越印记</span>
                    <span class="text-xs text-gray-600 text-center">{{honorData.zywpTimes}}次</span>
                </div>

                <div class="flex flex-col items-center p-4 rounded-xl">
                    <div class="overflow-hidden rounded-lg mb-3 w-16 h-16 flex items-center justify-center">
                        <img src="{{honorData.cqwpIcon}}" class="w-full h-full object-cover" alt="传奇印记">
                    </div>
                    <span class="text-sm font-semibold text-gray-700 text-center mb-1">传奇印记</span>
                    <span class="text-xs text-gray-600 text-center">{{honorData.cqwpTimes}}次</span>
                </div>

                <div class="flex flex-col items-center p-4 rounded-xl">
                    <div class="overflow-hidden rounded-lg mb-3 w-16 h-16 flex items-center justify-center">
                        <img src="{{honorData.jswpIcon}}" class="w-full h-full object-cover" alt="绝世印记">
                    </div>
                    <span class="text-sm font-semibold text-gray-700 text-center mb-1">绝世印记</span>
                    <span class="text-xs text-gray-600 text-center">{{honorData.jswpTimes}}次</span>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-6">
            <div class="stat-card rounded-2xl shadow-xl p-6">
                <span class="mode-tag mode-tag-classic">{{pattern}}</span>
                <div class="flex items-center gap-6 mb-6">
                    <img src="{{divUrl}}" alt="段位" class="w-28 h-28">
                    <div class="flex-1">
                        <div class="flex items-center justify-between">
                            <h2 class="text-2xl font-bold text-gray-800">{{roleJob}}</h2>
                            <div class="text-right text-gray-700 font-semibold">{{rankProgressText}}</div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                            <div class="progress-bar h-2 rounded-full" style="width: {{rankProgressPercent}}%"></div>
                        </div>
                        <div class="mt-3 grid grid-cols-4 gap-3 text-sm">
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <div class="text-gray-500">场次</div>
                                <div class="text-xl font-bold">{{chosenMatches}}</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <div class="text-gray-500">胜场</div>
                                <div class="text-xl font-bold">{{chosenWins}}</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <div class="text-gray-500">前十</div>
                                <div class="text-xl font-bold">{{chosenTop10}}</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <div class="text-gray-500">K/D</div>
                                <div class="text-xl font-bold">{{chosenKd}}</div>
                            </div>
                        </div>
                    </div>
                </div>




                <div class="mt-4 grid grid-cols-4 gap-3 text-sm">
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">胜率</div>
                        <div class="text-xl font-bold">{{chosenWinRate}}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">前十率</div>
                        <div class="text-xl font-bold">{{chosenTop10Rate}}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">场均淘汰</div>
                        <div class="text-xl font-bold">{{chosenAvgKills}}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">场均伤害</div>
                        <div class="text-xl font-bold">{{chosenAvgDamage}}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">场均暴击</div>
                        <div class="text-xl font-bold">{{chosenAvgCrit}}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">场均助攻</div>
                        <div class="text-xl font-bold">{{chosenAvgAssists}}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">场均治疗</div>
                        <div class="text-xl font-bold">{{chosenAvgHeals}}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">场均移动</div>
                        <div class="text-xl font-bold">{{chosenAvgMove}}</div>
                    </div>
                </div>
            </div>
            <div class="stat-card rounded-2xl shadow-xl p-6">
                <span class="mode-tag mode-tag-team">团竟模式</span>
                <div class="flex items-center gap-6 mb-6">
                    <img src="{{teamLevelIcon}}" alt="段位" class="w-28 h-28">
                    <div class="flex-1">
                        <div class="flex items-center justify-between">
                            <h2 class="text-2xl font-bold text-gray-800">{{teamLevelName}}</h2>
                            <div class="text-right text-gray-700 font-semibold">{{teamFeatProgressText}}</div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                            <div class="progress-bar h-2 rounded-full" style="width: {{teamFeatProgressPercent}}%">
                            </div>
                        </div>
                        <div class="mt-3 grid grid-cols-5 gap-3 text-sm">
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <div class="text-gray-500">场数</div>
                                <div class="text-xl font-bold text-gray-800">{{teamMatches}}</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <div class="text-gray-500">获胜</div>
                                <div class="text-xl font-bold text-green-600">{{teamWins}}</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <div class="text-gray-500">胜率</div>
                                <div class="text-xl font-bold text-green-600">{{teamWinRate}}</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <div class="text-gray-500">淘汰数</div>
                                <div class="text-xl font-bold text-red-600">{{teamKills}}</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg text-center">
                                <div class="text-gray-500">战损数</div>
                                <div class="text-xl font-bold text-purple-600">{{teamDamage}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="stat-card rounded-2xl shadow-xl p-6">
                <span class="mode-tag mode-tag-metro">地铁逃生</span>
                <div class="flex items-center gap-6 mb-6">
                    <img src="{{teamExpLevelIcon}}" alt="段位" class="w-28 h-28">
                    <div class="flex-1">
                        <div class="flex items-center justify-between">
                            <h2 class="text-2xl font-bold text-gray-800">{{teamExpLevelName}}</h2>
                            <div class="text-right text-gray-700 font-semibold">{{teamExpProgressText}}</div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                            <div class="progress-bar h-2 rounded-full" style="width: {{teamExpProgressPercent}}%"></div>
                        </div>
                        <div class="mt-3 grid grid-cols-4 gap-3 text-sm">
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-gray-500">场数</div>
                                <div class="text-xl font-bold text-gray-800">{{teamExpMatches}}</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-gray-500">K/D</div>
                                <div class="text-xl font-bold text-purple-600">{{teamExpKd}}</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-gray-500">单局最高收益</div>
                                <div class="text-xl font-bold text-yellow-600">{{teamMaxExp}}</div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="text-gray-500">赛季总收益</div>
                                <div class="text-xl font-bold text-yellow-600">{{teamTotalExp}}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 pt-4 border-t border-gray-200 grid grid-cols-4 gap-3 text-sm">
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">撤离率</div>
                        <div class="text-xl font-bold">{{teamEscapeRate}}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">淘汰玩家数</div>
                        <div class="text-xl font-bold">{{teamKills2}}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">淘汰匪徒数</div>
                        <div class="text-xl font-bold">{{teamBanditKills}}</div>
                    </div>
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <div class="text-gray-500">淘汰怪物数</div>
                        <div class="text-xl font-bold">{{teamMonsterKills}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>